<template>
    <div class="viewLogistics-main">
        <div class="package">
          <p class="package-num">包裹一</p>
          <div class="log-pro clearfix">
              <div class="pro-img fl"><router-link id="" to=""><img src=""/><p>{{number}}件商品</p></router-link></div>
              <div class="pro-msg fl"><p class="log-company"><i>快递公司：</i>{{logCompany}}</p><p class="log-number"><i>快递单号：</i>{{logNum}}</p></div>
          </div>
          <!--无法获取快递信息状态-->
          <div class="inrequired hidden">
              <img src="../assets/image/pic_inquire@2x.png"/>
              <p class="inrequired-text">无法获取到该快递信息</p>
              <router-link id="" to=""><p class="to-web">请前往官网查询</p></router-link>
          </div>
          <div class="logistics-process">
              <ul>
                  <li class="rightnow">
                      <p>【深圳市】快件已经签收,感谢您使用中通快递</p>
                      <p>2017-05-25 19:56</p>
                      <span class="before"></span>
                      <span class="after"></span>
                  </li>
                  <li>
                      <p>【深圳市】您的订单正在配送当中，请您准备签收（配送员尚军效，联系电话：<router-link id="" to="">13896279420</router-link>或<router-link id="" to="">0755-26734236</router-link>）感谢您的耐心等待。</p>
                      <p>2017-05-24 19:56</p>
                      <span class="before"></span>
                      <span class="after"></span>
                  </li>
                  <li>
                      <p>【深圳市】您的订单在北京通州分拣中心发货完成,准备发往深圳</p>
                      <p>2017-05-25 19:56</p>
                      <span class="before"></span>
                      <span class="after"></span>
                  </li>
              </ul>
          </div>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue'
    export default {
        data () {return {
            number:2,
            logCompany:'中通快递',
            logNum:'438823859810'
        }},
        name: 'app',
        methods:{

        }
    }
</script>
<style lang="scss">
  .viewLogistics-main{
    .package-num{ width: 100%; height:0.8rem; font-size: 0.28rem; text-indent: 0.3rem; line-height: 0.8rem; color: #151517; background: #fff;}
    .log-pro{
      width: 100%; height: 1.62rem; border-top: 0.2rem solid #f4f5f5; background: #fff;
      .pro-img{
        width:1.2rem; height:1.2rem; margin:0.21rem 0.3rem 0.21rem 0.3rem;
        a{display: block; width:1.2rem; height:1.2rem; position:relative;}
        img{display: block; width: 1.2rem; height: 1.2rem;}
        p{position:absolute; left:0; bottom:0; width: 1.2rem; height: 0.24rem; font-size: 0.18rem; text-align: center; line-height:0.24rem; color: #fefefe; background: rgba(51,51,51,0.6);}
      }
      .log-company{
        height: 0.28rem; margin: 0.46rem 0 0.24rem 0; font-size: 0.28rem; line-height: 0.28rem; color: #151517;
        i{height: 0.28rem; font-size: 0.28rem; line-height: 0.28rem; color: #666;}
      }
      .log-number{
        height: 0.28rem; font-size: 0.28rem; line-height: 0.28rem; color: #157efb;
        i{height: 0.28rem; font-size: 0.28rem; line-height: 0.28rem; color: #666;}
      }
    }
    .inrequired{
      width: 100%; position: absolute; top:3.9rem;
      img{ display: block; width: 2.14rem; height: 2.14rem; margin: 0 auto;}
      .inrequired-text{width: 100%; height:0.28rem; margin-top: 0.62rem; font-size: 0.28rem; text-align: center; line-height: 0.28rem; color: #666;}
      a{
        display:block; width: 2rem; height:0.28rem; margin: 0.72rem auto 0;
        .to-web{width: 2rem; height: 0.28rem; font-size: 0.28rem; text-align: center; line-height: 0.28rem; color: #ff365d;}
      }
    }
    .logistics-process{
      width: 100%; border-top: 0.2rem solid #f4f5f5; background: #fff;
      ul{
        padding-left: 1.04rem; padding-right: 0.36rem;
        li{
          position: relative; border-bottom: 1px solid #f1f1f1; padding-top: 0.32rem; padding-bottom: 0.24rem;
          p{
            font-size: 0.24rem; line-height: 0.4rem; color: #666;
            a{font-size: 0.24rem; line-height: 0.4rem; color: #157efb;}
          }
          .before{position: absolute; left: -0.44rem; top: 0.06rem; height: 100%; width: 0; border-left: 2px solid #f1f1f1;}
          .after{position: absolute; left: -0.48rem; top: 0.5rem; width: 0.12rem; height: 0.12rem; background: #ddd; border-radius: 50%;}
        }
      }
      .rightnow{
        p{color:#333;}
        .after{position: absolute; left: -0.56rem; top: 0.4rem; width: 0.15rem; height: 0.15rem; border-radius: 50%; border: 0.06rem solid rgba(255,150,170,1); background: #ff365d;}
      }
    }
  }
</style>
